<body></body>
<script>
  // 副作用：
  // 副作用场景1：effect修改了body的内容，任何读取body内容都会受到影响
  // function effect(){
  //     document.body.innerText = 'hello vue3'
  // }

  // 副作用场景2：
  // let val = 1
  // function effect() {
  //   val = 2 // 修改全局变量产生副作用
  // }

  // 响应式：副作用函数读取某个对象的属性，
  const obj = {text: 'hello world'}

  function effect() {
    // effect 函数的执行会读取 obj.text
    document.body.innerText = obj.text
  }
  obj.text = 'hell vue3' // 当 obj的属性变化，同时希望effect会重新运行
</script>
